<template>
  <view class="con">
    <!-- 头部 -->
    <view class="top flex flex_between">
      <view class="topz flex">
        <!-- 未授权登录 -->
        <image class="topz_img" v-if="isLogin===1" src="/static/mine/nologin.png"></image>
        <!-- 已授权登录 -->
        <image class="topz_img" v-if="isLogin===2" :src="userInfo.avatarUrl"></image>
        <!-- 未授权登录 -->
        <view class="topzc" v-if="isLogin===1" @click="noLoginBtn">
          <view class="topzc_v1">还没登录哦</view>
          <view class="topzc_v2 flex">
            <view class="weideng">点击登录/注册</view>
          </view>
        </view>
        <!-- 未授权登录 -->
        <view class="topzc" v-if="isLogin===2">
          <view class="topzc_v1">{{userInfo.nickName}}</view>
          <view class="topzc_v2 flex">
            <image class="topzc_v2_img" mode="widthFix" :src="userInfo.lv_ico"></image>
            <view class="topzc_v2_v">{{userInfo.nicknum}}</view>
          </view>
        </view>
        <!-- <button class="btn" open-type="getPhoneNumber" @getphonenumber="getPhone">授权手机号并登录</button> -->
      </view>
      <view class="topy flex">
        <view hover-class="none" @click="goInvite">
          <image class="topy_img" src="/static/mine/img04.png" mode="widthFix"></image>
        </view>

        <view @click="goSet">
          <image class="topy_img" src="/static/mine/img05.png" mode="widthFix"></image>
        </view>
      </view>
    </view>
    <!-- 中间内容 -->
    <view class="main">
      <view class="main_t flex flex_between">
        <view class="main_tz flex">
          <image class="main_tz_img" src="/static/mine/img06.png" mode="widthFix"></image>
          <view class="main_tz_c">尊贵的{{userInfo.lv}}{{userInfo.lv_name}}合伙人</view>
        </view>
        <view @click="goEquity" hover-class="none" class="main_tY">查看权益</view>
      </view>
      <view class="main_c">
        <view class="main_c1 flex flex_between">
          <view class="main_c1_t">
            <view class="main_c1_tv1">总收益(元)</view>
            <view class="main_c1_tv2">{{userInfo.money_total}}</view>
          </view>
          <view @click="goWallet" class="main_c1_y">
            <image class="main_c1_y_img" src="/static/mine/img07.png" mode="widthFix"></image>
            <text class="main_c1_y_t">钱包</text>
          </view>
        </view>
        <view class="main_c2 flex flex_between">
          <view class="main_c2li">
            <view class="main_c2li_v1">可提现(元)</view>
            <view class="main_c2li_v2">{{userInfo.money}}</view>
          </view>
          <view class="main_c2li">
            <view class="main_c2li_v1">今日预估(元)</view>
            <view class="main_c2li_v2">{{money_day}}</view>
          </view>
          <view class="main_c2li">
            <view class="main_c2li_v1">本月预估(元)</view>
            <view class="main_c2li_v2">{{money_day}}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 导航列表 -->
    <view class="navList flex flex_between">
      <view @click="goTeam" hover-class="none" class="navListli">
        <image class="navListli_img" src="/static/mine/img08.png" mode="widthFix"></image>
        <view class="navListli_t">我的团队</view>
      </view>
      <view @click="goInvite" class="navListli">
        <image class="navListli_img" src="/static/mine/img09.png" mode="widthFix"></image>
        <view class="navListli_t">邀请好友</view>
      </view>
      <view @click="goRevenueDetails" class="navListli">
        <image class="navListli_img" src="/static/mine/img10.png" mode="widthFix"></image>
        <view class="navListli_t">我的收益</view>
      </view>
      <view @click="goCourse" class="navListli">
        <image class="navListli_img" src="/static/mine/img11.png" mode="widthFix"></image>
        <view class="navListli_t">我的课程</view>
      </view>
    </view>
    <view class="navList flex flex_between">
      <view @click="goCrossBorder" class="navListli">
        <image class="navListli_img" src="/static/mine/img30.png" mode="widthFix"></image>
        <view class="navListli_t">我的跨境</view>
      </view>
      <view @click="goSubsidy" class="navListli">
        <image class="navListli_img" src="/static/mine/img31.png" mode="widthFix"></image>
        <view class="navListli_t">我的补贴</view>
      </view>
      <view @click="goExpressRecycling" class="navListli">
        <image class="navListli_img" src="/static/mine/img32.png" mode="widthFix"></image>
        <view class="navListli_t">我的快递</view>
      </view>
      <view @click="goMyProductOperation" class="navListli">
        <image class="navListli_img" src="/static/mine/img33.png" mode="widthFix"></image>
        <view class="navListli_t">我的运营</view>
      </view>
    </view>
    <!-- 列表 -->
    <view class="mlist">
      <navigator hover-class="none" url="/packageA/mine/questions?type=gg" class="mlistli flex flex_between">
        <view class="mlistliz fl">官方公告</view>
        <image class="mlistliy fr" src="/static/jiant.png" mode="widthFix"></image>
      </navigator>
      <navigator hover-class="none" url="/packageA/mine/questions?type=wt" class="mlistli flex flex_between">
        <view class="mlistliz fl">常见问题</view>
        <image class="mlistliy fr" src="/static/jiant.png" mode="widthFix"></image>
      </navigator>
      <!-- 			<navigator hover-class="none" url="/packageA/mine/questions?type=guiZe" class="mlistli flex flex_between">
				<view class="mlistliz fl">平台规则</view>
				<image class="mlistliy fr" src="/static/jiant.png" mode="widthFix"></image>
			</navigator>
			<navigator hover-class="none" url="/packageA/mine/questions?type=jianYi" class="mlistli flex flex_between">
				<view class="mlistliz fl">投诉建议</view>
				<image class="mlistliy fr" src="/static/jiant.png" mode="widthFix"></image>
			</navigator> -->
    </view>
    <!-- 未登录的时候--点击获取昵称，头像 -->
    <view class="zhezhao" v-if="isShow_init1" @click="hideTan"></view>


    <view class="tan tan_init1" v-if="isShow_init1">
      <view class="tan_title">欢迎加入陌上未来</view>
      <view class="tan_t flex">
        <view class="">
          <view class="newxin">
            <view class="newxin_1">感谢您信任并使用陌上未来</view>
            <view class="newxin_2">我们深知个人信息的重要性，我们将按法律法规采取相应保护措施，尽力保护您的信息安全。在使用前，请仔细阅读并理解:</view>
            <view class="newxin_2">
              我们会根据您使用服务的具体功能需要，收集必要的用户信息。为了更好地保障您的个人权益，请您认真阅读<text>《陌上未来用户注册服务协议》</text>和<text>《陌上未来小程序隐私保护指引》</text>，了解我们收集、使用、存储、分享个人信息的情况，以及对您个人信息的安全保护措施
            </view>
            <view class="newxin_2">如您理解并接受上述内容，请点击“同意”开始接受我们的服务</view>
          </view>
        </view>

      </view>
      <view class="tan_b flex flex_between">
        <view class="tan_b_d1" @click="goinit2">拒绝</view>
        <!-- <button open-type="getUserInfo" class="tan_b_d2" @click="toLogin">同意</button> -->
        <button class="tan_b_d2" @click="toLogin">同意</button>
<!--        <button class="tan_b_d2" v-if="canUseGetUserProfile" @click="toLogin">同意</button>
        <button class="tan_b_d2" v-else open-type="getUserInfo" bindgetuserinfo="getUserInfo">同意</button> -->
      </view>
    </view>

  </view>
</template>

<script>
  import {
    getLoginUser, //获取(添加)用户信息
    getUserUpdate, //修改用户信息
    withdrawWill //预估收益
  } from '@/request/api.js'
  export default {
    data() {
      return {
        openid: uni.getStorageSync('openid'), //获取缓存的openid
        isLogin: uni.getStorageSync('isLogin') || 1, //是否登录授权 1是未授权；2是已授权
        isShow_init1: false, //未授权-点击后的弹窗
        userInfo: uni.getStorageSync('userInfo'), //授权后的信息
        isLogout: uni.getStorageSync('isLogout') || 1, //是否退出状态
        money_day: 0, //今日预估
        money_month: 0, //本月预估
        canUseGetUserProfile: false
      }
    },
    onLoad() {
      if(uni.getUserProfile) {
        this.canUseGetUserProfile = true
      }
    },
    onShow() {
      // console.log('ggggggggggggggg')
      // console.log(uni.getStorageSync('isLogout'))
      // console.log(uni.getStorageSync('userInfo'))
      // console.log(this.userInfo)
      this.isLogin = uni.getStorageSync('isLogin') || 1
      this.userInfo = uni.getStorageSync('userInfo')
      console.log('微信授权后的用户信息')
      console.log(this.userInfo)
      this.getLoginUserFun() //获取用户信息--通过接口
      this.withdrawWillFun() //获取预估收益
    },
    methods: {
      // 没有授权登录的时候---点击出现弹框
      noLoginBtn() {
        this.isShow_init1 = true
      },
      // 点击同意--弹出微信授权头像、昵称组件
      toLogin() {
        let that = this
        uni.getUserProfile({
          desc: '获取用户信息',
          success: (res) => {
            console.log(res);
            console.log('授权成功');
            uni.showToast({
              icon:'none',
              title:res.userInfo.nickName
            })
            const {
              userInfo: {
                avatarUrl,
                nickName
              }
            } = res; //取出userInfo中avatarUrl和nickName的值
            const userInfo = {
              avatarUrl,
              nickName
            }
            that.isShow_init1 = false
            uni.setStorageSync('userInfo', userInfo); //存用户信息
            uni.setStorageSync('isLogin', 2); //存登录状态，若为2，则是登录状态
            setTimeout(function() {
              that.reload()
            }, 500)
          },
          fail: (err) => {
            if (err.errCode === 'fail auth deny') {
              // 用户拒绝授权
              console.log('用户拒绝了授权请求');
              uni.setStorageSync('login', 1); //未登录
              // 这里可以执行用户拒绝授权后的逻辑，比如提示用户或者引导用户去设置中开启权限等
            } else {
              // 其他错误处理
              uni.setStorageSync('login', 1); //未登录
              console.log('获取用户信息失败', err);
            }
          }
        })
      },

      // 获取用户信息--通过接口
      getLoginUserFun() {
        let that = this
        getLoginUser({
          openid: this.openid,
          pid: uni.getStorageSync('pid') || ''
        }).then(res => {
          console.log('获取(添加)用户信息')
          console.log(res)
          if (res.error_code === 0) {
            // 如果通过后端接口获取的用户信息有数据,则把头像和昵称更新一下
            that.userInfo = res.data
            if (res.data.head) {
              that.userInfo.avatarUrl = res.data.head
            }
            if (res.data.nikename) {
              that.userInfo.nickName = res.data.nikename
            }
            uni.setStorageSync('userInfo', that.userInfo);
          } else {
            uni.showToast({
              icon: 'none',
              title: res.msg
            })
          }
        })
      },

      // 获取预估收益
      withdrawWillFun() {
        withdrawWill({
          openid: this.openid
        }).then(res => {
          console.log(res)
          if (res.error_code === 0) {
            this.money_day = res.data.money_day
            this.money_month = res.data.money_month
          } else {
            uni.showToast({
              icon: 'none',
              title: res.msg
            })
          }
        })
      },

      goinit2() {
        this.isShow_init1 = false
      },

      hideTan() {
        this.isShow_init1 = false
      },

      // 点击-邀请-判断是否登录
      goInvite() {
        if (this.isLogin === 1) {
          uni.showToast({
            icon: 'none',
            title: '未登录，先进行授权登录'
          })
        } else {
          uni.navigateTo({
            url: '/packageA/mine/invite'
          })
        }
      },

      // 点击进去设置页面-如果没有登录-就提示他让他先登录
      goSet() {
        if (this.isLogin === 1) {
          uni.showToast({
            icon: 'none',
            title: '未登录，先进行授权登录'
          })
        } else {
          uni.navigateTo({
            url: '/packageA/mine/set'
          })
        }
      },

      // 点击"查看权益"页面-如果没有登录-就提示他让他先登录
      goEquity() {
        if (this.isLogin === 1) {
          uni.showToast({
            icon: 'none',
            title: '未登录，先进行授权登录'
          })
        } else {
          uni.navigateTo({
            url: '/packageA/mine/equity'
          })
        }
      },

      // 点击"钱包"页面-如果没有登录-就提示他让他先登录
      goWallet() {
        if (this.isLogin === 1) {
          uni.showToast({
            icon: 'none',
            title: '未登录，先进行授权登录'
          })
        } else {
          uni.navigateTo({
            url: '/packageA/mine/wallet'
          })
        }
      },

      // 点击"我的团队"--进入“我的团队”页面--如果未登录，需要先提示：未登录，先进行授权登录
      goTeam() {
        if (this.isLogin === 1) {
          uni.showToast({
            icon: 'none',
            title: '未登录，先进行授权登录'
          })
        } else {
          uni.navigateTo({
            url: '/packageA/mine/team'
          })
        }
      },

      // 点击"我的收益"页面-如果没有登录-就提示他让他先登录
      goRevenueDetails() {
        if (this.isLogin === 1) {
          uni.showToast({
            icon: 'none',
            title: '未登录，先进行授权登录'
          })
        } else {
          uni.navigateTo({
            url: '/packageA/mine/revenueDetails'
          })
        }
      },

      // 点击"我的课程"页面-如果没有登录-就提示他让他先登录
      goCourse() {
        if (this.isLogin === 1) {
          uni.showToast({
            icon: 'none',
            title: '未登录，先进行授权登录'
          })
        } else {
          uni.navigateTo({
            url: '/packageA/mine/course'
          })
        }
      },

      // 点击"我的跨境"页面-如果没有登录-就提示他让他先登录
      goCrossBorder() {
        if (this.isLogin === 1) {
          uni.showToast({
            icon: 'none',
            title: '未登录，先进行授权登录'
          })
        } else {
          uni.navigateTo({
            url: '/packageA/mine/crossBorder'
          })
        }
      },

      // 点击"我的补贴"页面-如果没有登录-就提示他让他先登录
      goSubsidy() {
        if (this.isLogin === 1) {
          uni.showToast({
            icon: 'none',
            title: '未登录，先进行授权登录'
          })
        } else {
          uni.navigateTo({
            url: '/packageA/mine/subsidy'
          })
        }
      },

      // 点击"我的快递"页面-如果没有登录-就提示他让他先登录
      goExpressRecycling() {
        if (this.isLogin === 1) {
          uni.showToast({
            icon: 'none',
            title: '未登录，先进行授权登录'
          })
        } else {
          uni.navigateTo({
            url: '/packageA/index/expressRecycling'
          })
        }
      },

      // 点击"我的运营"页面-如果没有登录-就提示他让他先登录
      goMyProductOperation() {
        if (this.isLogin === 1) {
          uni.showToast({
            icon: 'none',
            title: '未登录，先进行授权登录'
          })
        } else {
          uni.navigateTo({
            url: '/packageA/mine/myProductOperation'
          })
        }
      },



      // 重新刷新页面
      reload() {
        const pages = getCurrentPages()
        // 声明一个pages使用getCurrentPages方法
        const curPage = pages[pages.length - 1]
        // 声明一个当前页面
        curPage.onLoad(curPage.options) // 传入参数
        curPage.onShow()
        curPage.onReady()
      }
    }
  }
</script>

<style scoped lang="scss">
  .con {
    background: url('/static/mine/img01.png') no-repeat 340rpx -174rpx;
    background-size: 348rpx 348rpx;
    background-color: #EEEEEE;

    .top {
      width: 100%;
      height: auto;
      padding: 0 0;
      box-sizing: border-box;
      margin: 40rpx 0;
      align-items: normal;
      margin-top: 20rpx;

      .topz_img {
        width: 130rpx;
        height: 130rpx;
        border-radius: 50%;
        margin-right: 30rpx;
      }

      .topzc {
        line-height: initial;

        .topzc_v1 {
          color: rgba(16, 16, 16, 1);
          font-size: 40rpx;
          height: 56rpx;
          // line-height: 56rpx;
          margin-bottom: 12rpx;
        }

        .topzc_v2 {
          border-radius: 40rpx;
          background-color: rgba(249, 191, 65, 1);

          .topzc_v2_img {
            width: 104rpx;
            height: 40rpx;
            border-radius: 40rpx 0px 0px 40rpx;
          }

          .topzc_v2_v {
            padding: 0 14rpx;
            padding-right: 20rpx;
            height: 40rpx;
            color: rgba(16, 16, 16, 1);
            font-size: 24rpx;
            line-height: 40rpx;
            border-radius: 0px 40px 40px 0px;
            background-color: rgba(249, 191, 65, 1);
            font-family: 'AvantGardeFont';
          }

          .weideng {
            color: rgba(16, 16, 16, 1);
            font-size: 24rpx;
            width: 100%;
            text-align: center;
            padding: 2px 10rpx;
            ;
          }
        }
      }

      .topy {
        align-items: normal;
        margin-top: 17rpx;
        margin-right: 20rpx;

        .topy_img {
          width: 48rpx;
          height: auto;
          margin-left: 40rpx;

        }
      }
    }

    .main {
      width: 100%;
      height: auto;

      .main_t {
        width: 100%;
        border-radius: 20rpx 20rpx 0px 0px;
        background-color: rgba(249, 191, 65, 1);
        color: rgba(16, 16, 16, 1);
        font-size: 28rpx;
        height: 110rpx;
        padding: 0 30rpx;
        box-sizing: border-box;
        padding-bottom: 20rpx;

        .main_tz {
          .main_tz_img {
            width: 52rpx;
            height: auto;
            margin-right: 12rpx;
          }

          .main_tz_c {
            color: rgba(16, 16, 16, 1);
            font-size: 28rpx;
          }
        }

        .main_tY {
          color: rgba(0, 0, 0, 1);
          font-size: 28rpx;
          height: 95rpx;
          line-height: 95rpx;
        }
      }

      .main_c {
        width: 100%;
        height: auto;
        background: #fff;
        border-radius: 20rpx;
        margin-top: -20rpx;
        padding: 0 30rpx;
        box-sizing: border-box;

        .main_c1 {
          padding-top: 34rpx;
          align-items: normal;

          .main_c1_t {
            .main_c1_tv1 {
              height: 40rpx;
              line-height: 40rpx;
              color: rgba(16, 16, 16, 1);
              font-size: 28rpx;
              margin-bottom: 6rpx;
            }

            .main_c1_tv2 {
              height: 58rpx;
              line-height: 58rpx;
              color: rgba(16, 16, 16, 1);
              font-size: 48rpx;
              font-family: 'AvantGardeFont';
            }
          }

          .main_c1_y {
            width: 160rpx;
            height: 52rpx;
            border-radius: 40rpx;
            background-color: rgba(0, 0, 0, 1);
            text-align: center;
            line-height: 52rpx;
            text-align: center;

            .main_c1_y_img {
              width: 32rpx;
              height: auto;
              position: relative;
              top: 6rpx;
            }

            .main_c1_y_t {
              color: rgba(255, 255, 255, 1);
              font-size: 28rpx;
              margin-left: 6rpx;
            }
          }
        }

        .main_c2 {
          margin-top: 40rpx;
          padding-bottom: 30rpx;

          .main_c2li {
            width: 210rpx;
            height: 112rpx;
            border-radius: 10rpx;
            background-color: rgba(238, 238, 238, 1);

            .main_c2li_v1 {
              margin-left: 20rpx;
              color: rgba(137, 137, 137, 1);
              font-size: 24rpx;
              height: 34rpx;
              line-height: 34rpx;
              margin-top: 22rpx;
            }

            .main_c2li_v2 {
              margin-left: 20rpx;
              color: rgba(16, 16, 16, 1);
              font-size: 28rpx;
              font-family: 'AvantGardeFont';
            }
          }
        }
      }
    }

    .navList {
      width: 100%;
      height: 140rpx;
      border-radius: 20rpx;
      background-color: rgba(255, 255, 255, 1);
      margin: 20rpx 0;

      .navListli {
        width: 25%;
        text-align: center;

        .navListli_img {
          width: 48rpx;
          height: auto;
        }

        .navListli_t {
          height: 40rpx;
          line-height: 40rpx;
          color: rgba(16, 16, 16, 1);
          font-size: 28rpx;
        }
      }
    }

    .mlist {
      width: 100%;
      height: auto;

      .mlistli {
        width: 100%;
        height: 104rpx;
        border-radius: 20rpx;
        background-color: rgba(255, 255, 255, 1);
        padding: 0 30rpx;
        box-sizing: border-box;
        margin-bottom: 20rpx;
        font-size: 28rpx;
        padding-left: 34rpx;

        .mlistliz {}

        .mlistliy {
          width: 32rpx;
          height: auto;
        }
      }
    }
  }

  .logint {
    width: 100%;
    height: 680rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    background: #fff;
    text-align: center;

    .pictrue {
      width: 140rpx;
      height: 140rpx;
      margin: 0 auto;
      margin-top: 88rpx;
      margin-bottom: 50rpx;

      .avatar {
        width: 140rpx;
        height: 140rpx;
        border-radius: 100%;
      }
    }

    .nicheng {
      width: 680rpx;
      height: 92rpx;
      border-radius: 100rpx;
      background-color: rgba(232, 230, 230, 1);
      color: rgba(16, 16, 16, 1);
      font-size: 28rpx;
      margin: 0 auto;
      margin-bottom: 48rpx;
    }

    .logint_btn {
      width: 680rpx;
      height: 92rpx;
      line-height: 92rpx;
      border-radius: 100rpx;
      background-color: rgba(249, 191, 65, 1);
      color: rgba(16, 16, 16, 1);
      font-size: 28rpx;
      margin: 0 auto;
      margin-bottom: 48rpx;
    }
  }

  button {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent;
  }

  button::after {
    border: none !important;
  }

  .logint_di {
    width: 100%;
    height: auto;
    justify-content: center;

    .logint_di1 {
      width: 24rpx;
      height: 24rpx;
      background-color: rgba(249, 191, 65, 1);
      text-align: center;
      line-height: 24rpx;
      border-radius: 100%;
      margin-right: 12rpx;

      .logint_di1_img {
        width: 20rpx;
        height: auto;
      }
    }

    .logint_di2 {
      color: rgba(155, 155, 155, 1);
      font-size: 24rpx;
    }
  }

  .newxin {
    width: 560rpx;
    height: auto;
    border-radius: 20rpx;
    background-color: rgba(238, 238, 238, 1);
    padding: 24rpx;
    box-sizing: border-box;

    .newxin_1 {
      line-height: 36rpx;
      color: rgba(16, 16, 16, 1);
      font-size: 24rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
    }

    .newxin_2 {
      line-height: 36rpx;
      color: rgba(16, 16, 16, 1);
      font-size: 24rpx;
      margin-bottom: 20rpx;

      text {
        font-weight: bold;
      }
    }
  }

  .tan.tan_init1 {
    margin-top: -457rpx;
  }
</style>